<template>
	<view>
		<view class="header u-f-ajc">
			<button class="no-bind" v-if="isShowbind"  @tap="confirmBind">
				<text>暂无收款微信号</text>
				<text class="label">去绑定</text>
			</button>
			<view class="binded" v-else>
				<view class="u-f-jsb">
					<view>微信头像</view>
					<image class="avatar" :src="bindedWxInfo.payeeUserPhoto" mode="aspectFill"></image>
				</view>
				<view class="u-f-jsb">
					<view>微信昵称</view>
					<view>{{ bindedWxInfo.payeeNickName }}</view>
				</view>
			</view>
		</view>
		<view class="body">
			<view class="info">
				<view class="title">当前登录微信</view>
				<view class="">
					<view class="item u-f-jsb">
						<view>微信昵称</view>
						<view class="name">
							<open-data type="userNickName"></open-data>
						</view>
					</view>
					<view class="item u-f-jsb">
						<view>微信头像</view>
						<view class="avatar" >
							<open-data class="avatar" type="userAvatarUrl"></open-data>
						</view>
						
						<!-- <image class="avatar" :src="userInfo.avatarUrl" mode="aspectFill"></image> -->
					</view>
				</view>
			</view>
			<view class="tips">
				<view>提醒：</view>
				<view>1、收款微信用于尿素加注分润收益提现，提现后收益金额将直接进入该收款微信账户零钱包中。</view>
				<view>2、绑定后请确认该收款微信是本人微信，若发现问题，请及时更换绑定。</view>
				<view class="subtitle">责任声明：</view>
				<view style="text-indent: 2em;">收款微信的设置涉及个人利益和资金安全，若因账户所有人错误操作而导致收益资金错转他人账户，本平台概不负责，请知晓。</view>
			</view>
			
			<view class="btn" v-if="bindedWxInfo.payeeOpenId && bindedWxInfo.isMe=='No'" @tap="confirmBind"><button type="default">更换绑定</button></view>
		</view>
		
		<!-- 绑定确认弹窗 -->
		<bind-confirm ref="bindConfirm" :userInfo="userInfo" @confirmEvent="confirmEvent"></bind-confirm>

		<!-- 发送验证码 -->
		<send-msgCode @bindSucEvent="bindSuc" ref="sendMsgcode"></send-msgCode>
	</view>
</template>

<script>
import bindConfirm from '@/components/popup/bind-confirm.vue';
import sendMsgCode from '@/components/popup/send-msgCode.vue';
export default {
	components: { bindConfirm, sendMsgCode },
	data() {
		return {
			userInfo: {},
			isShowbind: false
		};
	},
	computed: {
		bindedWxInfo() {
			return this.$store.state.bindedWxInfo;
		}
	},
	onLoad() {
		uni.getUserInfo({
			success: res => {
				console.log(res);
				this.userInfo = res.userInfo;
			}
		});
		if (!this.bindedWxInfo.payeeOpenId) {
			this.isShowbind = true;
		}
	},
	methods: {
		
		confirmBind() {
			this.$refs.bindConfirm.open();
		},
		confirmEvent() {
			this.$refs.sendMsgcode.open();
		},
		bindSuc() {
			this.isShowbind = false;
			// 刷新绑定信息
			this.$store.dispatch('requestBindedWxInfo');
		}
	}
};
</script>

<style lang="scss">
page {
	background: #f5f5f5 !important;
}

.header {
	height: 280rpx;

	.no-bind {
		color: #999999;
		border: none;
		background-color: rgba(0, 0, 0, 0);
		.label {
			color: #ff9239;
			margin-left: 30rpx;
		}
	}

	.binded {
		margin: 20rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		width: calc(100vw - 40rpx);
		padding: 0 25rpx;
		font-weight: 600;
		font-size: 30rpx;

		> view {
			height: 110rpx;

			> view:first-child {
				margin-left: 20rpx;
			}

			> view:last-child {
				color: #999999;
			}
		}
		> view:not(:last-child) {
			border-bottom: 1rpx solid #eeeeee;
		}
		.avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
		}
	}
}

.body {
	margin: 20rpx;
	border-radius: 16rpx;
	overflow: hidden;
	font-size: 24rpx;

	.info {
		position: relative;
		background-color: #FFFFFF;
		border-radius: 16rpx;
		color: #999999;
		margin-bottom: 20rpx;
		.item {
			height: 90rpx;
			margin: 0 50rpx;
			font-size: 30rpx;
		}
		.item:not(:last-child) {
			border-bottom: 1rpx solid #EEEEEE;
		}
		.title {
			width: 178rpx;
			height: 50rpx;
			border-radius: 18rpx 0;
			background-color: #FF9239;
			left: 0;
			line-height: 50rpx;
			text-align: center;
			color: #FFFFFF;
			font-size: 24rpx;
		}

		.avatar {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			overflow: hidden;
		}
		.name {
			max-width: 250rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}

	.tips {
		color: #aaaaaa;
		background-color: #ffffff;
		padding: 36rpx 50rpx;

		> view {
			line-height: 1.6;
		}

		.subtitle {
			margin-top: 20rpx;
		}
	}
	
	.btn {
		margin: 0 20rpx;
		margin-top: 80rpx;
		button {
			background-color: #323e56;
			color: #ffffff;
			border-radius: 20rpx;
			height: 90rpx;
			line-height: 90rpx;
		}
	}
}

</style>
